{extend name="property/public/insidePageBase" /}
{block name="title"}编辑收费方案{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label indispensable">物业筛选</label>
                <div class="layui-input-block">
                    <select name="property_id" lay-filter="property_id" lay-search>
                        <option value="">--请选择--</option>
                        {foreach $propertyData as $k=>$v}
                        <option value="{$v['id']}" {if ($info['property_id'] == $v['id'])}selected{/if}>{$v['name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">方案名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="plan_name" value="{$info['plan_name']}" lay-verify="require" autocomplete="off" placeholder="请输入方案名称" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">方案状态</label>
                        <div class="layui-input-block">
                            <select name="is_show" lay-filter="is_show" lay-search>
                                <option value="1" {if ($info['is_show'] == 1)}selected{/if}>启用</option>
                                <option value="2" {if ($info['is_show'] == 2)}selected{/if}>禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">方案类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="mode_type" lay-filter="electricity_mode" autocomplete="off" value="1" title="按单次计费" {:isset($info['mode_type']) ? $info['mode_type'] == 1 ? 'checked' : '' : ''}>
                    <input type="radio" name="mode_type" lay-filter="electricity_mode" autocomplete="off" value="2" title="按时长计费" {:isset($info['mode_type']) ? $info['mode_type'] == 2 ? 'checked' : '' : ''}>
                </div>
            </div>

            <div class="layui-form-item electricity_mode1" {if $info['mode_type'] == 2}style="display: none"{/if}>
                <label class="layui-form-label">单次价格</label>
                <div class="layui-input-group" style="width: 440px;">
                    <input type="text" maxlength="5" name="basic_price" value="{$info['basic_price']??''}"  autocomplete="off" class="layui-input other_fee_amount" placeholder="请输入单费率价格"  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                    <div class="layui-input-split layui-input-suffix">¥ / 次</div>
                </div>
            </div>

            <div class="layui-form-item electricity_mode3" {if $info['is_mode'] == 1}style="display: none"{/if}>
                <button type="button" class="layui-btn layui-btn-fluid" id="addOtherFee">添加时长价格</button>
                <div id="otherFeeBox"></div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark">{$info['remark']}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="otherFeeTpl" type="text/html">
    {{# layui.each(d, function(index,item) { }}
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
            <div class="layui-input-group">
                <input type="text"  name="stair_price[{{index}}][fee_price]" value="{{item.fee_price}}" data-index="{{index}}"  autocomplete="off" class="layui-input other_fee_price" placeholder="请输入金额" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                <div class="layui-input-split layui-input-suffix">-</div>
                <input type="text" maxlength="5" name="stair_price[{{index}}][fee_hour]" value="{{item.fee_hour}}" data-index="{{index}}"  autocomplete="off" class="layui-input other_fee_hour" placeholder="请输入时长" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                <div class="layui-input-split layui-input-suffix">小时</div>
            </div>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
            <button type="button" class="layui-btn layui-btn-danger delOtherFee" data-index="{{index}}">删除</button>
        </div>
    </div>
    {{# }); }}
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer', 'laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,  laytpl = layui.laytpl;

        var otherData = {:json_encode($info['stair_price'] ?: [])};
        $('#addOtherFee').on('click', function() {
            otherData.push({
                fee_hour:'',
                fee_price:0
            })
            loadOtherFeeTpl();
        });
        $(document).on('click', '.delOtherFee', function() {
            otherData.splice($(this).data('index'), 1);
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_fee_hour', function() {
            otherData[$(this).data('index')].fee_hour = $(this).val();
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_fee_price', function() {
            otherData[$(this).data('index')].fee_price = $(this).val();
            loadOtherFeeTpl();
        });
        function loadOtherFeeTpl() {
            var getTpl = otherFeeTpl.innerHTML,view = document.getElementById('otherFeeBox');
            laytpl(getTpl).render(otherData, function(html){
                view.innerHTML = html;
            });
        }
        loadOtherFeeTpl();

        form.on('radio(electricity_mode)', function(data) {
            if(data.value == 1) {
                $('.electricity_mode1').show();
                $('.electricity_mode2').hide();
                $('.electricity_mode_service_price').show();
            }
            if(data.value == 2) {
                $('.electricity_mode1').hide();
                $('.electricity_mode2').hide();
                $('.electricity_mode_service_price').show();
            }
        });
    });
</script>
{/block}